<template>
  <div class="shujutree">
     <div class="danxuan">
      <!-- <span class="text" :style="{color:flag=='DeviceManageTree'?'#409eff':''}" @click="checktype({name:'DeviceManageTree'})">配电</span>
      <span class="text" :style="{color:flag=='PhotovoltaicDeviceManageTree'?'#409eff':''}" @click="checktype({name:'PhotovoltaicDeviceManageTree'})">光伏</span>
      <span class="text" :style="{color:flag=='ENERGY_BUILDING_SET_TREE'?'#409eff':''}" @click="checktype({name:'ENERGY_BUILDING_SET_TREE'})">能耗</span>
      <span class="text" :style="{color:flag=='MbmDeviceManageTree'?'#409eff':''}" @click="checktype({name:'MbmDeviceManageTree'})">计费</span> -->
      <el-tabs v-model="flag" @tab-click="checktype">
        <el-tab-pane label="配电" name="DeviceManageTree"></el-tab-pane>
        <el-tab-pane label="光伏" name="PhotovoltaicDeviceManageTree"></el-tab-pane>
        <el-tab-pane label="能耗" name="ENERGY_SET_TREE"></el-tab-pane> 
        <el-tab-pane label="计费" name="MbmDeviceManageTree"></el-tab-pane>
        <el-tab-pane label="微电网" name="MicrogridTree"></el-tab-pane>
        <el-tab-pane label="储能" name="EnergyStorageSystemTree"></el-tab-pane>
        <el-tab-pane label="电力交易" name="TradeCenterTree"></el-tab-pane>
      </el-tabs>
      <!-- <el-tabs v-model="flag" @tab-click="checktype">
        <el-tab-pane label="光伏" name="PhotovoltaicDeviceManageTree"></el-tab-pane>
        <el-tab-pane label="配电" name="PowerDistributionManagementTree"></el-tab-pane>
        <el-tab-pane label="微电网" name="MicrogridTree"></el-tab-pane> 
        <el-tab-pane label="储能" name="EnergyStorageSystemTree"></el-tab-pane>
      </el-tabs> -->
     </div>
     <el-autocomplete
      class="inline-input"
      v-model="filterText"
      size="small"
      style="margin-bottom: 10px;width:100%"
      :fetch-suggestions="querySearch"
      placeholder="输入关键字进行过滤"
      :trigger-on-focus="true"
      value-key="name"
      :debounce='300'
      @select="handleSelect"
    ></el-autocomplete>
      <!-- 树组件 -->
      <div class="treebox" ref="treeboxs">
        <el-tree
          v-if="isshow"
          :props="props"
          :load="loadNode"
          :default-expanded-keys="array"
          :highlight-current="true"
          lazy
          node-key="id"
          @node-click="handleNodeClick"
          ref="tree"
          >
          <template slot-scope="{ node, data }">
            <span style="font-size: 14px;color: #606266;">
               <img
              :src="'data:image/png;base64,' + data.iconBase64"
              style="
                width: 16px;
                height: 16px;
                margin-right: 5px;
                vertical-align: bottom;"/> {{ node.label }}</span>
          </template>
        </el-tree>
      </div>
  </div>
</template>

<script>
import { getgenjiedianapi, getzijidianapi} from '@/api/monitor'
import {getKeywordListApi} from '@/api/Ledger'
export default {
  name: 'CallPoliceTreeList',

  data() {
    return {
      flag: 'DeviceManageTree',
      filterText: '',
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      },
      treeModel: 'DeviceManageTree',
      isshow: true,
      resolve: null,
      array:[]
    };
  },

  mounted() {
    
  },

  methods: {
    // 树节点点击
    handleNodeClick(val) {
      this.$emit('nodeClick', val)
    },
    // 类型切换
    checktype(val) {
      this.flag = val.name
      this.isshow = false
      this.treeModel=val.name
      this.$emit('checktype')
       setTimeout(() => this.isshow = true, 100)
    },
    // 树节点搜索
    async querySearch(queryString, cb) {
      const res = await getKeywordListApi({ name: queryString })
      const restaurants = res.data.list
      cb(restaurants)
      // 调用 callback 返回建议列表的数据
    },
    // 搜索选择
    handleSelect (item) {
      const newarr=item.pathId.split(',')
      for (let i = 0;i<newarr.length;i++) {
        if (newarr[i]) {
          this.array.push(newarr[i])
        }
      }
      function getgaoliang(that) {
        let node = that.$refs.tree.getNode(item);
        if (node) {
          that.handleNodeClick(node.data)
          that.$refs.tree.setCurrentKey(item.id);
        } else {
          setTimeout(() => {
            getgaoliang(that)
          }, 500);
        }
        }
      getgaoliang(this)
    },
    // 设备树懒加载
    async loadNode(node, resolve) {
      this.resolve = resolve
      const res = await getgenjiedianapi({ treeModel: this.treeModel })
      if (node.level === 0) { // 初始的级数（最顶层）
        const ress = await getzijidianapi(res.data.list[0])
        return resolve(ress.data.list) // 最顶层数据渲染为region
      }
      if (node.level > 0) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      }
    },
  },
};
</script>
<style scoped lang="scss">
.shujutree{
  width: 100%;
  height: 100%;
  .danxuan{
    /* display: flex;
    justify-content: space-between; */
    width: 100%;
    /* overflow-x: auto;
    white-space: nowrap; */
    margin-bottom: 10px;
    ::v-deep .el-radio__input{
      display: none;
    }
    ::v-deep .el-tabs__content{
      display: none;
    }
    .text{
      cursor: pointer;
      margin-right: 20px;
    }
    .text:hover{
      color: #409eff;
    }
  }
  .treebox{
    height: 85%;
    overflow: auto;
  }
}
</style>